<template>
  <div class="wrap">
    <ChildCom title="第一个">
      <div>我是老六</div>
    </ChildCom>
    <ChildCom title="第二个">
      <div>我是老七</div>
    </ChildCom>
    <SonCom>
      <template #title>
        <h2>第三个</h2>
      </template>
      <template v-slot:content>
        <div>我是老八</div>
      </template>
      <template #list="{ data }">
        <ul>
          <li v-for="d in data" :key="d.id">{{ d.name }}</li>
        </ul>
      </template>
    </SonCom>
    <div>{{ x }}</div>
  </div>
</template>
<script setup lang="ts">
import ChildCom from './ChildCom.vue'
import SonCom from './SonCom.vue'
</script>

<style lang="scss" scoped>
.wrap {
  display: flex;
  justify-content: space-evenly;
}
</style>
